<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>ymall-前后端分离</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">ymall商城</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
         <span class="rootName">管理员</span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;" id="edit">设置</a></dd>
          <dd><a href="javascript:;" id="logout">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;"><i class="layui-icon layui-icon-cellphone"></i>   商品管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" date-url="goods/list.html"><i class="layui-icon">&#xe60c;</i>   商品列表</a></dd>
            <dd><a href="javascript:;" date-url="goods/add.html"><i class="layui-icon">&#xe60c;</i>   添加商品</a></dd>
          </dl>
        </li>
		
		<li class="layui-nav-item layui-nav-itemed">
		  <a class="" href="javascript:;"><i class="layui-icon layui-icon-cols"></i>分类管理</a>
		  <dl class="layui-nav-child">
		    <dd><a href="javascript:;" date-url="sort/list.html">
				<i class="layui-icon">&#xe60c;</i>   分类列表</a>
			</dd>
		    <dd><a href="javascript:;" date-url="sort/add.html">
				<i class="layui-icon">&#xe60c;</i>   添加分类</a>
			</dd>
		  </dl>
		</li>
		
		<li class="layui-nav-item layui-nav-itemed">
		  <a class="" href="javascript:;"><i class="layui-icon layui-icon-cart"></i>   订单管理</a>
		  <dl class="layui-nav-child">
		    <dd><a href="javascript:;" date-url="order/list.html"><i class="layui-icon">&#xe60c;</i>   订单列表</a></dd>
		  </dl>
		</li>
		
		<li class="layui-nav-item layui-nav-itemed">
		  <a class="" href="javascript:;"><i class="layui-icon layui-icon-user"></i>用户管理</a>
		  <dl class="layui-nav-child">
		    <dd><a href="javascript:;" date-url="user/list.html"> <i class="layui-icon"  >&#xe60c;</i>   用户列表</a></dd>
		  </dl>
		</li>
        
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<!-- 修改admin信息 -->
<script type="text/html" id="editRoot">
	<form class="layui-form">
		<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-inline">
				<input type="text"  name="rootname" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">旧密码</label>
			<div class="layui-input-inline">
				<input type="password"  name="oldpassword" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">新密码</label>
			<div class="layui-input-inline">
				<input type="password"  name="password" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">真实姓名</label>
			<div class="layui-input-inline">
				<input type="text"  name="realname" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-inline">
				<input type="text"  name="phone" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<input type="hidden" name="head"  "/>
			<label class="layui-form-label">分类图片</label>
			<div class="layui-input-inline">
				<!-- 使用layui的上传图片的插件 -->
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="demo1" style="width: 92px;height: 92px;">
				    <p id="demoText"></p>
				  </div>
				  <div style="width: 95px;">
				    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
				      <div class="layui-progress-bar" lay-percent=""></div>
				    </div>
				  </div>
				</div> 
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn layui-btn-danger" 
					lay-submit lay-filter="edit">修改分类</button>
			</div>	
	</form>
</script>

<script src="./layui/layui.js"></script>
<!-- <script src="./js/jquery-3.6.0.js"></script> -->
<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script>
//JS 
layui.use(['element', 'layer', 'util','upload','form'], function(){
  var element = layui.element,
  form = layui.form,
  upload = layui.upload
  ,layer = layui.layer
  ,util = layui.util;
  var $ = layui.$;
  
  //退出操作
  $("#logout").click(function(){
	 //清除cookie里的token
	 removeCookie('token');
	 
	  //跳转到登录页面
	  window.location.href='login.html';
  });
  $("#edit").click(function(){
	  var id = $(".rootName").attr("id");
	  var res = null;
	  
	  var index = layer.open({
		  type:1,
		  title:'修改信息',
		  area:['500px','500px'],
		  content:$('#editRoot').html()
	  });
		/* gotoUrl('admin/edit.html?id='+$(".rootName").attr('id')); */
		 $.ajax({
			url:'http://127.0.0.1:9000/api/roots/selectById',
			type:'get',
			data:{id:id},
			dataType:'json',
			success:function(data){
				 $("input[name='id']").attr("value",data.data.id);		
			 	 $("input[name='rootname']").attr("value",data.data.rootname);
				 $("input[name='realname']").attr("value",data.data.realname); 
				 $("input[name='phone']").attr("value",data.data.phone);
				 if(data.data.head != null){
					  $("#demo1").attr("src","http://127.0.0.1:9000/upload/"+data.data.head);
				 }				
			},
			error:function(){
				
			}
		});
		form.on('submit(edit)',function(data){
			alert(JSON.stringify(data.field));
			$.ajax({
				url:'http://127.0.0.1:9000/api/roots/edit',
				type:'put',
				contentType : "application/json;charsetset=UTF-8",
				dataType:'json',
				success:function(data){
					if(data.status == 201){
						layer.msg("修改成功！");
						layer.close(index);
						location.reload();
					}else{
						layer.msg(data.msg);
					}
				},
				error:function(){
					
				}
			});
			return false;
		});
		
		
		var uploadInst = upload.render({
		   elem: '#test1'
		   ,url: 'http://127.0.0.1:9000/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
		   ,before: function(obj){
		     //预读本地文件示例，不支持ie8
		     obj.preview(function(index, file, result){
		       $('#demo1').attr('src', result); //图片链接（base64）
		     });
		     
		     element.progress('demo', '0%'); //进度条复位
		     layer.msg('上传中', {icon: 16, time: 0});
		   }
		   ,done: function(res){
		     //如果上传失败
		     if(res.code > 0){
		       return layer.msg('上传失败');
		     }
		     //上传成功的一些操作
					  $("input[name='head']").val(res.data);
		     //……
		     $('#demoText').html(''); //置空上传失败的状态
		   }
		   ,error: function(){
		     //演示失败状态，并实现重传
		     var demoText = $('#demoText');
		     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		     demoText.find('.demo-reload').on('click', function(){
		       uploadInst.upload();
		     });
		   }
		   //进度条
		   ,progress: function(n, elem, e){
		     element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
		     if(n == 100){
		       layer.msg('上传完毕', {icon: 1});
		     }
		   }
		 });
  });
  
  //绑定菜单事件
  $(".layui-nav-tree dd>a").click(function(){
		var url = $(this).attr("date-url");
		
		gotoUrl(url);
  });
  
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });
  /* 重写$.ajax*/
  $.ajaxx = $.ajax;	//冲写ajax方法
  $.ajax = function(options){
	  
	  if(options.dataType == 'html'){
		  $.ajaxx(options)
		  return;
	  }
	  //传递token
	  var token = getCookie('token');
	  
	  if(token != null){
		  if(options.headers == undefined){
		  		  options.headers = {};
		  }
		  options.headers.token = token;
	  }
	  //重写success的处理
	  if(options.success == undefined){
		  options.success = function(data,status,xhr){
			  
		  }
	  }
	  
	 var success = options.success;
	 options.success = function(data,status,xhr){
		 //统一来判断用户的登录状态
		 if(data.status == 401){
			 layer.alert(data.msg,function(){
				 //跳转到登录页面
				 window.location.href = "login.html";
				});
		 }
		 //获取服务器的通过header的返回的token
		 var token = xhr.getResponseHeader('token');
		if(token != null){
			setCookie('token',token);
		}
 
		 success(data,status,xhr);
	 }
	  
	  $.ajaxx(options);
	  
  }
  
 
  checkLogin();
  /* 判断用户是否登录 */
  function checkLogin(){
  	//尝试从cookie中读取token
  	var token = getCookie("token");
  	if(token.length == 0){
  		//没有登陆
  		window.location.href='login.html';
  	}else{
  		// 登录信息已过期
  		//获取当前用户登录的信息
		$.ajax({
			url:'http://127.0.0.1:9000/api/roots/'+token,
			type:'get',
			dataType:'json',
			success:function(data){
				//获取到了当前登录的用户
				root = data.data;
				//显示当前用户的名字
				$(".rootName").html(root.realname);
				$(".rootName").attr('id',root.id);
				if(root.head == null || root.head.length ==0){
					$(".layui-nav-img").attr('src','img/7.gif');
				}else{
					$(".layui-nav-img").attr('src','http://127.0.0.1:9000/upload/ '+root.head);
				}
				
			},
			error:function(){
				
			}
		});
  	}
  }
  function gotoUrl(url){
  	if(url == undefined){
  		alert("没有链接");
  		return;
  	}
   	// 使用Ajax请求url
   	$.ajax({
   		url: url,
   		type: 'get',
   		data: {},
   		dataType: 'html',
   		success:function(data){
   			$(".layui-body>div").html(data);
   		},
   		error:function(){
   			
   		}
   	});
   }
});
 
  

</script>
</body>
</html>
      